import React,{useState,useRef} from 'react';
import ReactDOM from'react-dom/client';
import './antMessage.scss';
import { CSSTransition } from 'react-transition-group'

let messageInstance = null;
const message = {
    success(){
        if (messageInstance) {
            messageInstance.unmount(); // 卸载之前的实例
        }
        messageInstance = ReactDOM.createRoot(document.getElementById('Message'));
        messageInstance.render(<Message text="success" icon={"✓"}  />);
    }
}
const Message = (props) => {
    const [prop, setProp] = useState(true)
    const {text, icon} = props;
    const nodeRef = useRef(null)
    const handleMessage = () => {
        setTimeout(() => {
            setProp(false)
        }, 1000)
    }
    return (
        <CSSTransition appear unmountOnExit nodeRef={nodeRef} in={prop} timeout={1000} classNames="Message" onEntered={() => handleMessage()}>
            <div className="ant-message-container" ref={nodeRef}>
                <div className="ant-message" >{icon} {text}</div>
            </div>
        </CSSTransition>
    );
};

const AntMessage = () => {
    return (
        <div>
            <button onClick={() => message.success()}>show message</button>
        </div>
    );
};
export default AntMessage;